<template>
	<view class="content">
		<view class="top-bar ">
			<view class="top-bar-right">
				<view class="text" @click="toSignUp">
					注册
				</view>
			</view>
		</view>
		<view class="logo">
			<image src="../../static/images/sign/logo1.png" mode=""></image>
		</view>
		<view class="main">
			<view class="title">登录</view>
			<view class="slogan">您好，欢迎来到yike!</view>
			<view class="inputs">
				<input type="text" placeholder="用户名/邮箱" @blur="getUser" placeholder-style="color:#aaa;font-weight:400;" />
				<input type="password" placeholder="密码" @blur="getPassword" placeholder-style="color:#aaa;font-weight:400;" />

			</view>
			<view class="tips">输入用户或密码错误!</view>
		</view>
		<view class="submit" @tap="Login">
			登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: '',
				psw: ''
			}
		},
		methods: {
			toSignUp: function() {
				uni.navigateTo({
					url: '../signup/signup'
				})
			},

			//获取用户名邮箱
			getUser: function(e) {
				this.user = e.detail.value
			},
			getPassword: function(e) {
				this.psw = e.detail.value
			},
			Login: function() {
				if (this.user && this.psw) {
					console.log("submit")
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/index.scss";

	.logo image {
		padding-top: 256rpx;
		width: 194rpx;
		height: 92rpx;
		margin: 0 auto;
	}

	.main {
		padding: 54rpx $uni-spacing-row-lg 120rpx;
		width: 100%;
		box-sizing: border-box;

		.title {
			font-size: 56rpx;
			font-weight: 500;
			color: $uni-text-color;
			line-height: 80rpx;
		}

		.slogan {
			font-size: 40rpx;
			color: $uni-text-color-grey;
			line-height: 56rpx;
		}

		.inputs {
			padding-top: 8rpx;

			input {
				padding-top: 40rpx;
				height: 88rpx;
				font-size: $uni-font-size-lg;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 88rpx;
				border-bottom: 1px solid $uni-border-color;
			}
		}

		.tips {
			float: left;
			font-size: $uni-font-size-lg;
			line-height: 56rpx;
			color: $uni-color-warning;
			// border-bottom: 1px solid $uni-border-color;
		}
	}

	.submit {
		box-sizing: border-box;
		width: 520rpx;
		height: 96rpx;
		background: $uni-color-primary;
		box-shadow: 0px 50rpx 32rpx -36rpx rgba(255, 228, 49, 0.4);
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: $uni-font-size-lg;
		font-weight: 500;
		color: $uni-text-color;

	}
</style>
